<style scoped lang="scss">
.content {
    padding-left: 10px;
    // position: relative;
    overflow: hidden;
}

.tu1{
    position: fixed;
    right: 20px;
    bottom: 10%;
    width: 40px;
    height: 40px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.6);
    img{
        width: 30px;
        height: 30px;
    }
}

.tk {
    z-index: 999;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    .he {
        width: 250px;
        height: 200px;
        // background: red;
        img{
            width: 100%;
            height: 100%;
        }
    }
}
.rich-text-container img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

</style>
<template>
    <div style="position: relative;width: 100vw;height: 100vh;">
        <div class="tu1">
            <img v-if="flags" @click="onshou" src="../../assets/images/image/xxhdpi/evaluation_star_n.png" alt="">
            <img v-if="!flags" @click="onshouqx()" src="../../assets/images/image/xxhdpi/evaluation_star_s.png" alt="">
        </div>
        <div class="tk" v-if="flag" @click="tktu">
            <div class="he">
                <img src="../../assets/images/image/hdpi/reward.png" alt="">
            </div>
        </div>
        <homeTop :showicon1="false" :showicon2="true" :showbar="true"></homeTop>
        <div class="content">
            <h2>{{ findInforData.title }}</h2>
            <div class="rich-text-container" v-html="findInforData.content"></div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import homeTop from '@/components/homeTop/index.vue';
import { getFindInforDetail, getCollect, getCollectDetailCancel } from '@/api';
import { ElMessage } from 'element-plus';

const findInforData = ref({ title: '', content: '' });
const id = ref<number>(Number(localStorage.getItem('sid')));

const findInforDetailList = async () => {
    const { data: res } = await getFindInforDetail({
        infoId: id.value,
    });
    findInforData.value = {
        title: res.result.title || '',
        content: res.result.content,
    };
    console.log(res);
};
findInforDetailList();
const flag = ref(false)
const getTime = () => {
    setTimeout(() => {
        console.log('哈哈哈');
        flag.value = true
    }, 10000)
    return
}
getTime()

// 拿取userId, sessionId
const userId = ref(JSON.parse(localStorage.getItem('userId')|| ''))
const sessionId = ref(JSON.parse(localStorage.getItem('sessionId')|| ''))
console.log(userId,'userId');
console.log(sessionId,'sessionId');

const collectData = async () => {
    const data:any={
        infoId:id.value
    }
  try {
    const res = await getCollect(userId.value,sessionId.value,data);
    console.log(res.data);
    if(res.data.status==='0000'){
        console.log('收藏成功');
    }
  } catch (error) {
    console.error(error);
  }
};
const flags=ref(true)
const onshou=()=>{
    collectData()
    flags.value=false
    ElMessage.success('收藏成功')
    console.log('收藏');
}

const collectDetailCancelData=async()=>{
    try{
        const res=await getCollectDetailCancel(userId.value,sessionId.value,id.value)
        console.log(res.data);
    }catch(error){
        console.error(error);
    }
}

const onshouqx=()=>{
    flags.value=true
    collectDetailCancelData()
    ElMessage.success('取消收藏成功')
    console.log('取消收藏');
}
const tktu=()=>{
    flag.value=false
}
</script>